<template>
    <div>
        <div class="wrapper activities"> 
        <div class="activity-card-list"> 
            <div class="top-title"> 
            <h4 class="latest">最新活动</h4>      
            <div class="clearfix"></div> 
            </div> 
            <!--v-infinite-scroll : 
                此属性，表明拖拽到下拉框底部的时候，触发的js方法
            -->
            <div class="activity-list" v-infinite-scroll="loadMore"> 
            <ul class="activity"> 
            <li class="activity-item" v-for="(item,index) in items" :key="index"> 
            <div class="activity-inner"> 
                <a href="http://"></a> 
                <div class="img">
                <router-link :to="`/gathering/item/${item.id}`">
                     <img :src="item.image" alt="" />
                </router-link>
                </div> 
                <div class="text"> 
                <p class="title">{{item.name}}</p> 
                <div class="fl goin"> 
                <p>时间：{{item.starttime}}</p> 
                <p>城市：{{item.city}}</p> 
                </div> 
                <div class="fr btn"> 
                <span class="sui-btn btn-bao">立即报名</span> 
                </div> 
                <div class="clearfix"></div> 
                </div> 
            </div> </li> 
            </ul> 
            </div> 
        </div> 
        </div> 
    </div>
</template>

<script>
import "~/assets/css/page-sj-activity-index.css"
import gatheringApi from "~/api/gathering"
export default {
    data() {
        return {
            page:1
        }
    },
    //nuxt中进行异步处理获取数据
    asyncData () {
        return gatheringApi.search({},1,10).then(res=>{
            return {
                items : res.data.data.rows
            }
        })
        //axios.get : 通过axios组件发送get请求
        ///then : 回调函数（获取数据值的处理过程）
    //     return axios.get(`http://192.168.74.128:7300/mock/5b288d2ebef551073bfb426e/gathering/gathering`)
    //         .then((res) => {
    //         return { 
    //             //res : 获取到了所有请求的数据(对象，对象中包含了所有返回数据，真正的数据全部都早res对象的data属性中)                
    //             items : res.data.data
    //         }
    // })
  },
  methods: {
      loadMore(){
          this.page ++
          gatheringApi.search({},this.page,10).then(res=>{
               this.items =  this.items.concat( res.data.data.rows ) //数据合并
          })
      }
  }
}
</script>

<style>

</style>
